<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Gravity Brain</title>

  <!-- 离线 Google 字体: Source Sans Pro -->
  <link rel="stylesheet" href="../static/css/google.css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
  <!-- Font Awesome 图标 -->
  <link rel="stylesheet" href="../static/plugins/fontawesome-free/css/all.min.css">
  <!-- overlayScrollbars -->
  <link rel="stylesheet" href="../static/plugins/overlayScrollbars/css/OverlayScrollbars.min.css">
  <!-- 主题样式 -->
  <link rel="stylesheet" href="../static/css/adminlte.min.css">
</head>
<body class="hold-transition dark-mode sidebar-mini layout-fixed layout-navbar-fixed layout-footer-fixed">
<div class="wrapper">

  <!-- 导航栏 -->
  <nav class="main-header navbar navbar-expand navbar-dark">
    <!-- 左侧导航栏链接 -->
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" data-widget="pushmenu" href="#" role="button"><i class="fas fa-bars"></i></a>
      </li>
      <li class="nav-item d-none d-sm-inline-block">
        <a href="index3.html" class="nav-link">主页</a>
      </li>
    </ul>
  </nav>
  <!-- /.navbar -->

  <!-- 主侧边栏容器 -->
  <aside class="main-sidebar sidebar-dark-primary elevation-4">
    <!-- 品牌 Logo -->
    <a  class="brand-link">
      <img src="../static/img/AdminLTELogo.png" alt="AdminLTE Logo" class="brand-image img-circle elevation-3" style="opacity: .8">
      <span class="brand-text font-weight-light">重力波大脑</span>
    </a>

    <!-- Sidebar -->
    <div class="sidebar">
      <!-- 侧边栏菜单 -->
      <nav class="mt-2">
        <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
          <!-- 使用 .nav-icon 类添加图标，
               或使用 font-awesome 或其他任何图标字体库 -->
          <li class="nav-item menu-open">
            <a href="index.html" class="nav-link active">
              <i class="nav-icon fas fa-tachometer-alt"></i>
              <p>
                首页
              </p>
            </a>
          </li>

          <li class="nav-item menu-open">
            <a href="index3.html" class="nav-link active">
              <i class="nav-icon fas fa-tachometer-alt"></i>
              <p>
                气象环境信息
              </p>
            </a>
          </li>

            <li class="nav-item menu-open">
            <a href="kgs.html" class="nav-link active">
              <i class="nav-icon fas fa-tachometer-alt"></i>
              <p>
                系统知识图谱展示
              </p>
            </a>
          </li>

            <li class="nav-item menu-open">
            <a href="index2.html" class="nav-link active">
              <i class="nav-icon fas fa-tachometer-alt"></i>
              <p>
                系统功能展示
              </p>
            </a>
          </li>

          <li class="nav-item menu-open">
            <a href="#" class="nav-link active">
              <i class="nav-icon fas fa-tachometer-alt"></i>
              <p>
                功能交互
                <i class="right fas fa-angle-left"></i>
              </p>
            </a>
            <ul class="nav nav-treeview">
              <li class="nav-item">
                <a href="detect.html" class="nav-link active">
                  <i class="far fa-circle nav-icon"></i>
                  <p>图像受气象干扰影响</p>
                </a>
              </li>
              <li class="nav-item">
                <a href="anoinv.html" class="nav-link active">
                  <i class="far fa-circle nav-icon"></i>
                  <p>重力波反演温度预测</p>
                </a>
              </li>
              <li class="nav-item">
                <a href="generation.html" class="nav-link active">
                  <i class="far fa-circle nav-icon"></i>
                  <p>重力波图像生成</p>
                </a>
              </li>
            </ul>
          </li>
        </ul>
      </nav>
      <!-- /.sidebar-menu -->
    </div>
    <!-- /.sidebar -->
  </aside>

  <!-- Content Wrapper. 包含页面内容 -->
  <div class="content-wrapper">
    <!-- 内容标题（页面标题） -->
    <div class="content-header">
      <div class="container-fluid">
        <div class="row mb-2">
          <div class="col-sm-6">
            <h1 class="m-0">重力波图像生成</h1>
          </div>
          <div class="col-sm-6">
            <ol class="breadcrumb float-sm-right">
              <li class="breadcrumb-item"><a href="#">首页</a></li>
              <li class="breadcrumb-item active">重力波图像生成</li>
            </ol>
          </div>
        </div>
      </div>
    </div>
    <!-- /.content-header -->

    <!-- 主体内容 -->
    <section class="content">
      <div class="container-fluid">

{#          <!-- 气象数据块 -->#}
{#          <div class="row">#}
{#              <div class="col-md-12">#}
{#                  <div class="card">#}
{#                      <div class="card-header d-flex justify-content-between">#}
{#                          <h3 class="card-title"  style="font-size:1.8rem;color:#fff;text-shadow: 1px 1px 2px rgba(0,0,0,0.5)">#}
{#                              气象数据可视化面板</h3>#}
{#                          <div class="timestamp-box">#}
{#                              <i class="fas fa-clock text-info"></i>#}
{#                              <span id="global-timestamp" class="ml-2" style="font-size:1.2rem;color:#fff"></span>#}
{#                          </div>#}
{#                      </div>#}
{#                      <div class="card-body">#}
{#                          <!-- 第一行：温度仪表盘 -->#}
{#                          <div class="row mb-4">#}
{#                              <!-- 外界温度 -->#}
{#                              <div class="col-md-6">#}
{#                                  <div class="card bg-dark">#}
{#                                      <div class="card-body text-center">#}
{#                                          <div id="externalTempGauge" style="height:220px"></div>#}
{#                                          <h5 class="text-muted mt-2">外界温度 (°C)</h5>#}
{#                                          <div class="timestamp-label">#}
{#                                              更新时间：<span id="temp-timestamp"></span>#}
{#                                          </div>#}
{#                                      </div>#}
{#                                  </div>#}
{#                              </div>#}
{##}
{#                              <!-- 地表温度 -->#}
{#                              <div class="col-md-6">#}
{#                                  <div class="card bg-dark">#}
{#                                      <div class="card-body text-center">#}
{#                                          <div id="surfaceTempGauge" style="height:220px"></div>#}
{#                                          <h5 class="text-muted mt-2">地表温度 (°C)</h5>#}
{#                                          <div class="timestamp-label">#}
{#                                              更新时间：<span id="ts-timestamp"></span>#}
{#                                          </div>#}
{#                                      </div>#}
{#                                  </div>#}
{#                              </div>#}
{#                          </div>#}
{##}
{#                          <!-- 第二行：湿度与风参数 -->#}
{#                          <div class="row mb-4">#}
{#                              <div class="col-md-4">#}
{#                                  <div class="card bg-dark">#}
{#                                      <div class="card-body text-center">#}
{#                                          <div id="humidityChart" style="height:220px"></div>#}
{#                                          <h5 class="text-muted mt-2">外界湿度 (%)</h5>#}
{#                                          <div class="timestamp-label">#}
{#                                              更新时间：<span id="humidity-timestamp"></span>#}
{#                                          </div>#}
{#                                      </div>#}
{#                                  </div>#}
{#                              </div>#}
{##}
{#                              <!-- 风参数仪表盘 -->#}
{#                              <div class="col-md-8">#}
{#                                  <div class="card bg-dark">#}
{#                                      <div class="card-body">#}
{#                                          <div class="row">#}
{#                                              <div class="col-md-3 text-center">#}
{#                                                  <div class="wind-dial-container">#}
{#                                                      <div class="wind-direction-arrow" id="windArrow"></div>#}
{#                                                      <canvas id="windDirection"></canvas>#}
{#                                                  </div>#}
{#                                                  <div class="wind-info mt-2">#}
{#                                                      <span class="badge bg-warning"#}
{#                                                            style="font-size: 1.2rem">风向</span>#}
{#                                                      <div class="d-flex flex-column align-items-center mt-2">#}
{#                                                          <div class="d-flex align-items-baseline">#}
{#                                                              <span id="wind_direction" class="h2 mb-0">0</span>#}
{#                                                              <span class="h4 mb-0 ml-1">°</span>#}
{#                                                          </div>#}
{#                                                      </div>#}
{#                                                  </div>#}
{#                                              </div>#}
{#                                              <div class="col-md-9">#}
{#                                                  <div class="param-grid">#}
{#                                                      <div class="param-item">#}
{#                                                          <i class="fas fa-wind param-icon"></i>#}
{#                                                          <span class="param-label">风速</span>#}
{#                                                          <span id="wind_speed" class="param-value"></span>#}
{#                                                          <span class="param-unit">m/s</span>#}
{#                                                      </div>#}
{#                                                      <div class="param-item">#}
{#                                                          <i class="fas fa-tachometer-alt param-icon"></i>#}
{#                                                          <span class="param-label">气压</span>#}
{#                                                          <span id="air_pressure" class="param-value"></span>#}
{#                                                          <span class="param-unit">hPa</span>#}
{#                                                      </div>#}
{#                                                      <div class="param-item">#}
{#                                                          <i class="fas fa-eye param-icon"></i>#}
{#                                                          <span class="param-label">能见度</span>#}
{#                                                          <span id="visibility" class="param-value"></span>#}
{#                                                          <span class="param-unit">km</span>#}
{#                                                      </div>#}
{#                                                  </div>#}
{#                                                  <div class="timestamp-label mt-3">#}
{#                                                      最后更新：<span id="wind-timestamp"></span>#}
{#                                                  </div>#}
{#                                              </div>#}
{#                                          </div>#}
{#                                      </div>#}
{#                                  </div>#}
{#                              </div>#}
{#                          </div>#}
{##}
{#                          <!-- 第三行：辐射监测 -->#}
{#                          <div class="row mb-4">#}
{#                              <div class="col-md-8">#}
{#                                  <div class="card bg-dark">#}
{#                                      <div class="card-body">#}
{#                                         <h5 style="font-size:1.4rem;color:#ffd700"><i#}
{#                                                  class="fas fa-satellite-dish mr-2"></i>辐射监测</h5>#}
{#                                          <div class="radiation-grid">#}
{#                                              <div class="radiation-item">#}
{#                                                  <div class="progress-container">#}
{#                                                      <div class="progress-label" style="color:#fff;font-size:1.1rem">#}
{#                                                          太阳下行 <span id="swd-value"></span> W/m²#}
{#                                                      </div>#}
{#                                                      <div class="progress"#}
{#                                                           style="height:25px;background:rgba(255,255,255,0.1)">#}
{#                                                          <div id="swdProgress"#}
{#                                                               class="progress-bar bg-warning progress-bar-striped"></div>#}
{#                                                      </div>#}
{#                                                  </div>#}
{#                                              </div>#}
{#                                              <div class="radiation-item">#}
{#                                                  <div class="progress-container">#}
{#                                                      <div class="progress-label" style="color:#fff;font-size:1.1rem">#}
{#                                                          太阳上行 <span id="swu-value"></span> W/m²#}
{#                                                      </div>#}
{#                                                      <div class="progress"#}
{#                                                           style="height:25px;background:rgba(255,255,255,0.1)">#}
{#                                                          <div id="swuProgress"#}
{#                                                               class="progress-bar bg-danger progress-bar-striped"></div>#}
{#                                                      </div>#}
{#                                                  </div>#}
{#                                              </div>#}
{#                                              <div class="radiation-item">#}
{#                                                  <div class="progress-container">#}
{#                                                      <div class="progress-label" style="color:#fff;font-size:1.1rem">#}
{#                                                          长波下行 <span id="lwd-value"></span> W/m²#}
{#                                                      </div>#}
{#                                                      <div class="progress"#}
{#                                                           style="height:25px;background:rgba(255,255,255,0.1)">#}
{#                                                          <div id="lwdProgress"#}
{#                                                               class="progress-bar bg-orange progress-bar-striped"></div>#}
{#                                                      </div>#}
{#                                                  </div>#}
{#                                              </div>#}
{#                                              <div class="radiation-item">#}
{#                                                  <div class="progress-container">#}
{#                                                      <div class="progress-label" style="color:#fff;font-size:1.1rem">#}
{#                                                          长波上行 <span id="lwu-value"></span> W/m²#}
{#                                                      </div>#}
{#                                                      <div class="progress"#}
{#                                                           style="height:25px;background:rgba(255,255,255,0.1)">#}
{#                                                          <div id="lwuProgress"#}
{#                                                               class="progress-bar bg-purple progress-bar-striped"></div>#}
{#                                                      </div>#}
{#                                                  </div>#}
{#                                              </div>#}
{#                                          </div>#}
{#                                          <div class="timestamp-label mt-2">#}
{#                                              更新时间：<span id="radiation-timestamp"></span>#}
{#                                          </div>#}
{#                                      </div>#}
{#                                  </div>#}
{#                              </div>#}
{##}
{#                              <!-- 电压历史图表 -->#}
{#                              <div class="col-md-4">#}
{#                                  <div class="card bg-dark">#}
{#                                      <div class="card-body">#}
{#                                          <h5 style="font-size:1.4rem;color:#00ff00"><i#}
{#                                                  class="fas fa-chart-line mr-2"></i>电压历史</h5>#}
{#                                          <div id="voltageHistoryChart" style="height:260px"></div>#}
{#                                          <div class="timestamp-label mt-2" style="color:#fff">#}
{#                                              最后更新：<span id="voltage-timestamp"></span>#}
{#                                          </div>#}
{#                                      </div>#}
{#                                  </div>#}
{#                              </div>#}
{#                          </div>#}
{##}
{#                          <!-- 第四行：降水与积雪 -->#}
{#                          <div class="row">#}
{#                              <div class="col-md-6">#}
{#                                  <div class="card bg-dark">#}
{#                                      <div class="card-body">#}
{#                                          <div class="precipitation-box">#}
{#                                              <i class="fas fa-cloud-rain fa-3x text-primary"></i>#}
{#                                              <div class="precipitation-info">#}
{#                                                  <div class="precipitation-value">#}
{#                                                      <span id="precipitation"></span>#}
{#                                                      <span class="unit">mm</span>#}
{#                                                  </div>#}
{#                                                  <div class="precipitation-label">降水量</div>#}
{#                                              </div>#}
{#                                          </div>#}
{#                                      </div>#}
{#                                  </div>#}
{#                              </div>#}
{#                              <div class="col-md-6">#}
{#                                  <div class="card bg-dark">#}
{#                                      <div class="card-body">#}
{#                                          <div class="snow-box">#}
{#                                              <i class="fas fa-snowflake fa-3x text-info"></i>#}
{#                                              <div class="snow-info">#}
{#                                                  <div class="snow-value">#}
{#                                                      <span id="sd"></span>#}
{#                                                      <span class="unit">cm</span>#}
{#                                                  </div>#}
{#                                                  <div class="snow-label">雪深</div>#}
{#                                              </div>#}
{#                                          </div>#}
{#                                      </div>#}
{#                                  </div>#}
{#                              </div>#}
{#                          </div>#}
{#                      </div>#}
{#                  </div>#}
{#              </div>#}
{#          </div>#}

          <!-- 环境数据 -->
          <div class="row">
              <div class="col-md-12">
                  <div class="card">
                      <div class="card-body p-0">
                          <table class="table table-striped">
                              <thead>
                              <tr>
                                  <th style="width: 15%">数据类型</th>
                                  <th style="width: 35%">时间</th>
                                  <th style="width: 35%">数据值</th>
                                  <th style="width: 15%"></th>
                              </tr>
                              </thead>
                              <tbody>
                              <tr>
                                  <td>温度一</td>
                                  <td>
                                      <div id="sensortime1"></div>
                                  </td>
                                  <td>
                                      <div class="progress progress-xs">
                                          <div class="progress-bar bg-success" id="sensorline1"
                                               style="width: 55%"></div>
                                      </div>
                                  </td>
                                  <td><span id="sensordata1">55%</span></td>
                              </tr>
                              <tr>
                                  <td>温度二</td>
                                  <td>
                                      <div id="sensortime2"></div>
                                  </td>
                                  <td>
                                      <div class="progress progress-xs">
                                          <div class="progress-bar bg-success" id="sensorline2"
                                               style="width: 70%"></div>
                                      </div>
                                  </td>
                                  <td><span id="sensordata2">70%</span></td>
                              </tr>
                              <tr>
                                  <td>相对湿度</td>
                                  <td>
                                      <div id="sensortime3"></div>
                                  </td>
                                  <td>
                                      <div class="progress progress-xs progress-striped active">
                                          <div class="progress-bar bg-success" id="sensorline3"
                                               style="width: 30%"></div>
                                      </div>
                                  </td>
                                  <td><span id="sensordata3">55%</span></td>
                              </tr>
                              <tr>
                                  <td>噪声</td>
                                  <td>
                                      <div id="sensortime4"></div>
                                  </td>
                                  <td>
                                      <div class="progress progress-xs progress-striped active">
                                          <div class="progress-bar bg-success" id="sensorline4"
                                               style="width: 90%"></div>
                                      </div>
                                  </td>
                                  <td><span id="sensordata4">55%</span></td>
                              </tr>
                              </tbody>
                          </table>
                      </div>
                      <!-- /.card-body -->
                  </div>
                  <!-- /.card -->
              </div>
              <!-- /.col -->
          </div>
          <!-- 图像生成 -->
          <div class="row">
              <!-- /.card-header -->
            <div class="col-md-8">
                <div class="card card-outline">
                    <div class="card-header">
                        <h3 class="card-title">
                            预测图像生成
                        </h3>
                    </div>
                    <div class="card-body">
                        <img  id="newest-sum-img" class="col-md-5">
{#                        <figcaption>这是图片标题</figcaption>#}
                        <img  id="newest-generation-img" class="col-md-3">
{#                        <figcaption>这是图片标题</figcaption>#}
                        <img  id="newest-generation-BG-img" class="col-md-3">
                    </div>
                </div>
            </div>
            <div class="col-md-4">
            <div class="card card-outline">
              <div class="card-header">
                <h5 class="card-title">
{#                    <h3 class="card-title">#}
{#                        重力波图像#}
{#                    </h3>#}
                    <button class="fc-button card-title" id="uploadButton">
                        选择图片
                    </button>
                    <input type="file" id="fileInput" style="display: none;" accept="image/*">
                </h5>
              </div>
              <div class="card-body">
                  <img id="selected_img" class="col-md-6">
              </div>
            </div>
          </div>
        </div>

      </div>
    </section>
  </div>

  <!-- Control Sidebar -->
  <aside class="control-sidebar control-sidebar-dark">
    <!-- 控制侧边栏内容在这里 -->
  </aside>
</div>
<!-- ./wrapper -->

<!-- 载入脚本 -->
<!-- jQuery -->
<script src="../static/plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap -->
<script src="../static/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- overlayScrollbars -->
<script src="../static/plugins/overlayScrollbars/js/jquery.overlayScrollbars.min.js"></script>
<!-- AdminLTE App -->
{#<script src="../static/js/adminlte.js"></script>#}

<!-- PAGE PLUGINS -->
<!-- jQuery Mapael -->
<script src="../static/plugins/jquery-mousewheel/jquery.mousewheel.js"></script>
<script src="../static/plugins/raphael/raphael.min.js"></script>
<script src="../static/plugins/jquery-mapael/jquery.mapael.min.js"></script>
<script src="../static/plugins/jquery-mapael/maps/usa_states.min.js"></script>
<!-- ChartJS -->
<script src="../static/plugins/chart.js/Chart.min.js"></script>

<!-- 用于演示 AdminLTE  -->
<script src="../static/js/demo.js"></script>
<!-- AdminLTE 仪表盘演示（仅用于演示） -->
{#<script src="../static/js/pages/dashboard2.js"></script>#}


<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>


<!-- AdminLTE App -->
<script src="../static/js/adminlte.min.js"></script>
<!-- FLOT CHARTS -->
<script src="../static/plugins/flot/jquery.flot.js"></script>
<!-- FLOT RESIZE 插件 - 允许在调整窗口大小时重新绘制图表 -->
<script src="../static/plugins/flot/plugins/jquery.flot.resize.js"></script>
<!-- FLOT PIE 插件 - 也用于绘制环形图 -->
<script src="../static/plugins/flot/plugins/jquery.flot.pie.js"></script>
<!-- uPlot -->
<script src="../static/plugins/uplot/uPlot.iife.min.js"></script>

<script src="../static/plugins/echart/echart.js"></script>

<!-- 传感器数据表格（环境信息） -->
<script>
    let firstSensorTime;
    let secondSensorTime;
    let noiseSensorTime;
    let firstSensorFirstTemperature;
    let firstSensorSecondTemperature;
    let firstSensorHumidity;
    let secondSensorFirstTemperature;
    let secondSensorSecondTemperature;
    let secondSensorFirstHumidity;
    let secondSensorSecondHumidity;
    let noise;
    function loadSensorData() {
        $.ajax({
            type: "post",
            async: true,
            url: "/api/findCurrentTemperature",
            success: function (data) {
                let map = new Map(Object.entries(data));
                map = map.get("0")
                console.log(map)
                let date = new Date(Date.parse(map.detection_time));
                firstSensorTime = formatDateTime(date);
                firstSensorFirstTemperature = map.first_temperature;
                firstSensorSecondTemperature = map.second_temperature;
                firstSensorHumidity = map.humidity;

                // 更新相关的 DOM
                document.getElementById("sensortime1").innerText = firstSensorTime;
                document.getElementById("sensortime2").innerText = firstSensorTime;
                document.getElementById("sensortime3").innerText = firstSensorTime;
                document.getElementById("sensordata1").innerText = firstSensorFirstTemperature + '℃';
                document.getElementById("sensordata2").innerText = firstSensorSecondTemperature + '℃';
                document.getElementById("sensordata3").innerText = firstSensorHumidity + '%';
                document.getElementById("sensorline1").style.width = firstSensorFirstTemperature + '%';
                document.getElementById("sensorline2").style.width = firstSensorSecondTemperature + '%';
                document.getElementById("sensorline3").style.width = firstSensorHumidity + '%';

                // 更新图表
                updateFirstSensorCharts();
            }
        });

        $.ajax({
            type: "post",
            async: true,
            url: "/api/findCurrentNoise",
            success: function (data) {
                let map = new Map(Object.entries(data));
                map = map.get("0")
                console.log(map)
                let date = new Date(Date.parse(map.detection_time));
                noiseSensorTime = formatDateTime(date);
                noise = map.noise;

                // 更新相关的 DOM
                document.getElementById("sensortime4").innerText = noiseSensorTime;
                document.getElementById("sensordata4").innerText = noise + 'dB';
                document.getElementById("sensorline4").style.width = noise + '%';


                // 更新图表
                updateNoiseChart();
            }
        });
    }

    {#// 更新第一个传感器图表#}
    {#function updateFirstSensorCharts() {#}
    {#    let fsftc_chartDom = document.getElementById('first_sensor_first_temperature_chart');#}
    {#    let fsftc_myChart = echarts.init(fsftc_chartDom);#}
    {#    let fsftc_option = {#}
    {#        tooltip: {#}
    {#            formatter: '{a} <br/>{b} : {c}℃'#}
    {#        },#}
    {#        series: [#}
    {#            {#}
    {#                name: '温度',#}
    {#                type: 'gauge',#}
    {#                progress: {#}
    {#                    show: true#}
    {#                },#}
    {#                itemStyle: {#}
    {#                    color: '#58D9F9',#}
    {#                    shadowColor: 'rgba(0,138,255,0.45)',#}
    {#                    shadowBlur: 10,#}
    {#                    shadowOffsetX: 2,#}
    {#                    shadowOffsetY: 2#}
    {#                },#}
    {#                title: {#}
    {#                    textStyle: {#}
    {#                        fontWeight: 'bolder',#}
    {#                        fontSize: 20,#}
    {#                        color: 'white'#}
    {#                    }#}
    {#                },#}
    {#                min: -30,#}
    {#                max: 30,#}
    {#                detail: {#}
    {#                    valueAnimation: true,#}
    {#                    formatter: '{value}',#}
    {#                    textStyle: {#}
    {#                        color: '#FFFFFF'#}
    {#                    },#}
    {#                    fontSize: 20#}
    {#                },#}
    {#                data: [#}
    {#                    {#}
    {#                        value: firstSensorFirstTemperature,#}
    {#                        name: '温度 (℃)'#}
    {#                    }#}
    {#                ],#}
    {#                radius: "95%",#}
    {#                splitLine: {#}
    {#                    lineStyle: {#}
    {#                        color: '#FFFFFF'#}
    {#                    }#}
    {#                },#}
    {#                axisTick: {#}
    {#                    lineStyle: {#}
    {#                        color: '#FFFFFF'#}
    {#                    }#}
    {#                },#}
    {#                axisLabel: {#}
    {#                    color: "#fff"#}
    {#                }#}
    {#            }#}
    {#        ],#}
    {#        axisPointer: {#}
    {#            lineStyle: {#}
    {#                color: '#FFFFFF'#}
    {#            }#}
    {#        }#}
    {#    };#}
    {##}
    {#    fsftc_option && fsftc_myChart.setOption(fsftc_option);#}
    {##}
    {#    // 第二个温度仪表盘#}
    {#    let fsstc_chartDom = document.getElementById('first_sensor_second_temperature_chart');#}
    {#    let fsstc_myChart = echarts.init(fsstc_chartDom);#}
    {#    let fsstc_option = {#}
    {#        tooltip: {#}
    {#            formatter: '{a} <br/>{b} : {c}℃'#}
    {#        },#}
    {#        series: [#}
    {#            {#}
    {#                name: '温度',#}
    {#                type: 'gauge',#}
    {#                progress: {#}
    {#                    show: true#}
    {#                },#}
    {#                itemStyle: {#}
    {#                    color: '#58D9F9',#}
    {#                    shadowColor: 'rgba(0,138,255,0.45)',#}
    {#                    shadowBlur: 10,#}
    {#                    shadowOffsetX: 2,#}
    {#                    shadowOffsetY: 2#}
    {#                },#}
    {#                title: {#}
    {#                    textStyle: {#}
    {#                        fontWeight: 'bolder',#}
    {#                        fontSize: 20,#}
    {#                        color: 'white'#}
    {#                    }#}
    {#                },#}
    {#                min: -30,#}
    {#                max: 30,#}
    {#                detail: {#}
    {#                    valueAnimation: true,#}
    {#                    formatter: '{value}',#}
    {#                    textStyle: {#}
    {#                        color: '#FFFFFF'#}
    {#                    },#}
    {#                    fontSize: 20#}
    {#                },#}
    {#                data: [#}
    {#                    {#}
    {#                        value: firstSensorSecondTemperature,#}
    {#                        name: '温度 (℃)'#}
    {#                    }#}
    {#                ],#}
    {#                radius: "95%",#}
    {#                splitLine: {#}
    {#                    lineStyle: {#}
    {#                        color: '#FFFFFF'#}
    {#                    }#}
    {#                },#}
    {#                axisTick: {#}
    {#                    lineStyle: {#}
    {#                        color: '#FFFFFF'#}
    {#                    }#}
    {#                },#}
    {#                axisLabel: {#}
    {#                    color: "#fff"#}
    {#                }#}
    {#            }#}
    {#        ],#}
    {#        axisPointer: {#}
    {#            lineStyle: {#}
    {#                color: '#FFFFFF'#}
    {#            }#}
    {#        }#}
    {#    };#}
    {##}
    {#    fsstc_option && fsstc_myChart.setOption(fsstc_option);#}
    {##}
    {#    // 湿度仪表盘#}
    {#    let fshc_chartDom = document.getElementById('first_sensor_humidity');#}
    {#    let fshc_myChart = echarts.init(fshc_chartDom);#}
    {#    let fshc_option = {#}
    {#        tooltip: {#}
    {#            formatter: '{a} <br/>{b} : {c}%'#}
    {#        },#}
    {#        series: [#}
    {#            {#}
    {#                name: '相对湿度',#}
    {#                type: 'gauge',#}
    {#                progress: {#}
    {#                    show: true#}
    {#                },#}
    {#                itemStyle: {#}
    {#                    color: '#58D9F9',#}
    {#                    shadowColor: 'rgba(0,138,255,0.45)',#}
    {#                    shadowBlur: 10,#}
    {#                    shadowOffsetX: 2,#}
    {#                    shadowOffsetY: 2#}
    {#                },#}
    {#                title: {#}
    {#                    textStyle: {#}
    {#                        fontWeight: 'bolder',#}
    {#                        fontSize: 20,#}
    {#                        color: 'white'#}
    {#                    }#}
    {#                },#}
    {#                min: 0,#}
    {#                max: 100,#}
    {#                detail: {#}
    {#                    valueAnimation: true,#}
    {#                    formatter: '{value}',#}
    {#                    textStyle: {#}
    {#                        color: '#FFFFFF'#}
    {#                    },#}
    {#                    fontSize: 20#}
    {#                },#}
    {#                data: [#}
    {#                    {#}
    {#                        value: firstSensorHumidity,#}
    {#                        name: '相对湿度（%）'#}
    {#                    }#}
    {#                ],#}
    {#                radius: "95%",#}
    {#                splitLine: {#}
    {#                    lineStyle: {#}
    {#                        color: '#FFFFFF'#}
    {#                    }#}
    {#                },#}
    {#                axisTick: {#}
    {#                    lineStyle: {#}
    {#                        color: '#FFFFFF'#}
    {#                    }#}
    {#                },#}
    {#                axisLabel: {#}
    {#                    color: "#fff"#}
    {#                }#}
    {#            }#}
    {#        ],#}
    {#        axisPointer: {#}
    {#            lineStyle: {#}
    {#                color: '#FFFFFF'#}
    {#            }#}
    {#        }#}
    {#    };#}
    {#    fshc_option && fshc_myChart.setOption(fshc_option);#}
    {# }#}

    {#// 噪声传感器图表更新#}
    {#function updateNoiseChart() {#}
    {#    let nc_chartDom = document.getElementById('noise_chart');#}
    {#    let nc_myChart = echarts.init(nc_chartDom);#}
    {#    let nc_option = {#}
    {#        tooltip: {#}
    {#            formatter: '{a} <br/>{b} : {c}db'#}
    {#        },#}
    {#        series: [#}
    {#            {#}
    {#                name: '噪声',#}
    {#                type: 'gauge',#}
    {#                progress: {#}
    {#                    show: true#}
    {#                },#}
    {#                itemStyle: {#}
    {#                    color: '#58D9F9',#}
    {#                    shadowColor: 'rgba(0,138,255,0.45)',#}
    {#                    shadowBlur: 10,#}
    {#                    shadowOffsetX: 2,#}
    {#                    shadowOffsetY: 2#}
    {#                },#}
    {#                title: {#}
    {#                    textStyle: {#}
    {#                        fontWeight: 'bolder',#}
    {#                        fontSize: 20,#}
    {#                        color: 'white'#}
    {#                    }#}
    {#                },#}
    {#                min: 0,#}
    {#                max: 100,#}
    {#                detail: {#}
    {#                    valueAnimation: true,#}
    {#                    formatter: '{value}',#}
    {#                    textStyle: {#}
    {#                        color: '#FFFFFF'#}
    {#                    },#}
    {#                    fontSize: 20#}
    {#                },#}
    {#                data: [#}
    {#                    {#}
    {#                        value: noise,#}
    {#                        name: '噪声 （db）'#}
    {#                    }#}
    {#                ],#}
    {#                radius: "95%",#}
    {#                splitLine: {#}
    {#                    lineStyle: {#}
    {#                        color: '#FFFFFF'#}
    {#                    }#}
    {#                },#}
    {#                axisTick: {#}
    {#                    lineStyle: {#}
    {#                        color: '#FFFFFF'#}
    {#                    }#}
    {#                },#}
    {#                axisLabel: {#}
    {#                    color: "#fff"#}
    {#                }#}
    {#            }#}
    {#        ],#}
    {#        axisPointer: {#}
    {#            lineStyle: {#}
    {#                color: '#FFFFFF'#}
    {#            }#}
    {#        }#}
    {#    };#}
    {#    nc_option && nc_myChart.setOption(nc_option);#}
    {# }#}

    $(function () {
        loadSensorData()
        setInterval(loadSensorData, 5000)
    })
</script>
<script>
    {#// 初始化图表#}
    {#function initCharts() {#}
    {#    // 温度仪表盘#}
    {#    window.externalTempGauge = echarts.init(document.getElementById('externalTempGauge'));#}
    {#    window.surfaceTempGauge = echarts.init(document.getElementById('surfaceTempGauge'));#}
    {#    window.humidityChart = echarts.init(document.getElementById('humidityChart'));#}
    {#    window.voltageHistoryChart = echarts.init(document.getElementById('voltageHistoryChart'));#}
    {##}
    {#    // 温度仪表盘通用配置#}
    {#    const tempGaugeOption = {#}
    {#        series: [{#}
    {#            type: 'gauge',#}
    {#            min: -60,#}
    {#            max: 60,#}
    {#            axisLine: {#}
    {#                lineStyle: {#}
    {#                    color: [[0.3, '#4dabf7'], [0.7, '#69db7c'], [1, '#ff6b6b']],#}
    {#                    width: 20#}
    {#                }#}
    {#            },#}
    {#            detail: {#}
    {#                formatter: '{value}°C',#}
    {#                fontSize: 24,#}
    {#                color: '#fff'#}
    {#            },#}
    {#            pointer: {show: true}#}
    {#        }]#}
    {#    };#}
    {##}
    {#    // 初始化仪表盘#}
    {#    externalTempGauge.setOption(tempGaugeOption);#}
    {#    surfaceTempGauge.setOption(tempGaugeOption);#}
    {##}
    {#    // 湿度环形图#}
    {#    humidityChart.setOption({#}
    {#        series: [{#}
    {#            type: 'pie',#}
    {#            radius: ['60%', '80%'],#}
    {#            label: {#}
    {#                show: true,#}
    {#                position: 'center',#}
    {#                fontSize: 24,#}
    {#                color: '#fff',#}
    {#                formatter: '{d}%'#}
    {#            },#}
    {#            data: [{value: 0}, {value: 100}]#}
    {#        }]#}
    {#    });#}
    {##}
    {#    // 电压历史图表#}
    {#    voltageHistoryChart.setOption({#}
    {#        xAxis: {#}
    {#            type: 'category',#}
    {#            data: [],#}
    {#            axisLabel: {#}
    {#                color: '#fff',#}
    {#                fontSize: 12,#}
    {#                rotate: -45#}
    {#            }#}
    {#        },#}
    {#        yAxis: {#}
    {#            name: '电压(V)',#}
    {#            nameTextStyle: {#}
    {#                color: '#fff',#}
    {#                fontSize: 14#}
    {#            },#}
    {#            axisLabel: {#}
    {#                color: '#fff',#}
    {#                fontSize: 12#}
    {#            }#}
    {#        },#}
    {#        series: [{#}
    {#            type: 'line',#}
    {#            smooth: true,#}
    {#            symbol: 'circle',#}
    {#            symbolSize: 8,#}
    {#            itemStyle: {#}
    {#                color: '#69db7c'#}
    {#            },#}
    {#            lineStyle: {#}
    {#                width: 3#}
    {#            },#}
    {#            areaStyle: {#}
    {#                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [#}
    {#                    {offset: 0, color: 'rgba(105,219,124,0.8)'},#}
    {#                    {offset: 1, color: 'rgba(105,219,124,0.1)'}#}
    {#                ])#}
    {#            }#}
    {#        }]#}
    {#    });#}
    {# }#}

    {#// 数据加载函数#}
    {#function loadData() {#}
    {#    $.ajax({#}
    {#        type: "post",#}
    {#        url: "/api/new_data",#}
    {#        success: function (data) {#}
    {#            let map = new Map(Object.entries(data[0]));#}
    {#            let timestamp = formatDateTime(new Date(map.get("timetamp")));#}
                {#let timestamp = map.get("timetamp");#}
    {##}
    {#            // 更新时间戳#}
    {#            $('#global-timestamp').text(timestamp);#}
    {##}
    {#            // 更新温度仪表盘#}
    {#            externalTempGauge.setOption({series: [{data: [{value: map.get("temperature")}]}]});#}
    {#            surfaceTempGauge.setOption({series: [{data: [{value: map.get("ts")}]}]});#}
    {#            $('#temp-timestamp').text(timestamp);#}
    {#            $('#ts-timestamp').text(timestamp);#}
    {##}
    {#            // 更新湿度图表#}
    {#            humidityChart.setOption({#}
    {#                series: [{#}
    {#                    data: [#}
    {#                        {value: map.get("humidity"), name: '当前湿度'},#}
    {#                        {value: 100 - map.get("humidity")}#}
    {#                    ]#}
    {#                }]#}
    {#            });#}
    {#            $('#humidity-value').text(map.get("humidity"));#}
    {#            $('#humidity-timestamp').text(timestamp);#}
    {##}
    {#            // 更新风参数#}
    {#            $('#wind_speed').text(map.get("wind_speed"));#}
    {#            const windDir = map.get("wind_direction") || 0;#}
    {#            $('#wind_direction').text(windDir);#}
    {#            $('#air_pressure').text(map.get("air_pressure"));#}
    {#            $('#visibility').text(map.get("visibility"));#}
    {#            $('#wind-timestamp').text(timestamp);#}
    {##}
    {#            // 更新辐射数据#}
    {#            $('#swd-value').text(map.get("swd"));#}
    {#            $('#swu-value').text(map.get("swu"));#}
    {#            $('#lwd-value').text(map.get("lwd"));#}
    {#            $('#lwu-value').text(map.get("lwu"));#}
    {#            $('#radiation-timestamp').text(timestamp);#}
    {##}
    {#            // 更新辐射进度条#}
    {#            $('#swdProgress').css('width', `${map.get("swd") / 200 * 100}%`);#}
    {#            $('#swuProgress').css('width', `${map.get("swu") / 200 * 100}%`);#}
    {#            $('#lwdProgress').css('width', `${map.get("lwd") / 200 * 100}%`); // 新增长波上行#}
    {#            $('#lwuProgress').css('width', `${map.get("lwu") / 200 * 100}%`); // 新增长波下行#}
    {##}
    {#            // 更新电压历史,待修改#}
    {#            $.ajax({#}
    {#                type: "post",#}
    {#                url: "/api/voltage_history",#}
    {#                success: function (historyData) {#}
    {#                    const voltages = historyData.map(d => d.bv);#}
    {#                    const times = historyData.map(d => {#}
    {#                        const date = new Date(d.timetamp);#}
    {#                        return `${date.getMinutes().toString().padStart(2, '0')}:${date.getSeconds().toString().padStart(2, '0')}`;#}
    {#                    }).reverse();#}
    {##}
    {#                    voltageHistoryChart.setOption({#}
    {#                        xAxis: {data: times},#}
    {#                        series: [{data: voltages}]#}
    {#                    });#}
    {#                    $('#voltage-timestamp').text(timestamp);#}
    {#                }#}
    {#            });#}
    {##}
    {#            // 更新降水积雪#}
    {#            $('#precipitation').text(map.get("precipitation"));#}
    {#            $('#sd').text(map.get("sd"));#}
    {##}
    {#            // 更新风向指针#}
    {#            const arrow = document.getElementById('windArrow');#}
    {#            if (arrow) {#}
    {#                arrow.style.transform = `rotate(${windDir}deg)`;#}
    {#            }#}
    {#        }#}
    {#    });#}
    {# }#}
{##}
{#    $(function () {#}
{#        initCharts()#}
{#        loadData()#}
{#        setInterval(loadData, 5000)#}
{#    })#}

    document.getElementById('uploadButton').addEventListener('click', function() {
        document.getElementById('fileInput').click();
    });

    document.getElementById('fileInput').addEventListener('change', function(event) {
        var file = event.target.files[0];
        var img_path = 'static\\data\\spectrogram8\\2018_10_05\\' + file.name;
        if (file) {
            var formData = new FormData();
            console.log(img_path);
            document.getElementById('selected_img').src = `${img_path}`;

            formData.append('img_path', img_path);

            fetch('/select_generation', {
                method: 'POST',
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                var resultDiv = document.getElementById('result');
                if (data.error) {
                    resultDiv.innerHTML = 'Error: ' + data.error;
                } else {
                    let map = new Map(Object.entries(data[0]))
                    {#resultDiv.src = map.get('detect_image');#}
                    document.getElementById("newest-generation-img").src = map.get('generation_image');
                    document.getElementById("newest-generation-BG-img").src = map.get('generation_BG_image');
                    document.getElementById("newest-sum-img").src = map.get('sum_image');
                }
            })
            .catch(error => {
                console.error('Error:', error);
            });
        }
    });
</script>
{#时间格式化#}
<script>
    function formatDateTime (date) {
        let y = date.getFullYear();
        let m = date.getMonth() + 1;
        m = m < 10 ? ('0' + m) : m;
        let d = date.getDate();
        d = d < 10 ? ('0' + d) : d;
        let h = date.getHours();
        h = h < 10 ? ('0' + h) : h;
        let minute = date.getMinutes();
        let second = date.getSeconds();
        minute = minute < 10 ? ('0' + minute) : minute;
        second = second < 10 ? ('0'+second):second;
        return y + '-' + m + '-' + d+' '+h+':'+minute+':'+second;

    }
</script>
<style>
/* 自定义样式 */
.timestamp-label { color: #6c757d; font-size: 1.2rem; }
.param-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; }
.param-item { background: rgba(255,255,255,0.05); padding: 15px; border-radius: 8px; }
.param-value { font-size: 1.2rem; font-weight: bold; }
.radiation-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.progress-container { margin-bottom: 15px; }
.progress-label { color: #fff; margin-bottom: 5px; }
.precipitation-box, .snow-box {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px;
}
.precipitation-info, .snow-info { flex-grow: 1; }
.precipitation-value, .snow-value {
    font-size: 2.5rem;
    font-weight: bold;
    line-height: 1;
}
.wind-dial-container {
    position: relative;
    width: 120px;
    height: 120px;
    margin: 0 auto;
}
.wind-direction-arrow {
    position: absolute;
    width: 2.5px;
    height: 80%;
    background: #ffd700;
    left: 50%;
    transform-origin: bottom;
    transition: transform 0.5s ease;
}
/* 风向数值居中 */
.wind-info {
    text-align: center;
}
.wind-info #wind_direction {
    font-size: 1.5rem;
    line-height: 1.2;
}

/* 参数标题放大 */
.param-label {
    font-size: 1.2rem !important;
    font-weight: 600;
    display: block;
    margin-bottom: 8px;
    color: #fff;
}
.param-value {
    font-size: 1.2rem;
    font-weight: bold;
}
.param-unit {
    font-size: 1.2rem;
    margin-left: 4px;
}
.param-icon {
    font-size: 1.3rem;
    margin-bottom: 8px;
}
</style>
</body>
</html>
